{{- if not (and (isset .Site.Params "palettes") (not .Site.Params.palettes)) -}}
{{- $palettes := slice "blue" "blue gray" "brown" "cyan" "green" "indigo" "orange" "pink" "purple" "red" "teal" "yellow" -}}
{{- $palettes := default $palettes .Site.Params.Palettes -}}
<section class="setting palettes">
  <form class="row">
    <div class="col-auto">
      <label><i class="fas fa-fw fa-palette"></i> {{ i18n "palette" }}</label>
    </div>
    <div class="col-auto ms-auto">
      <a id="btnPalette" class="btn btn-sm btn-outline-primary" role="button" aria-label="palettePicker">
        <i class="fas fa-eye-dropper"></i>
      </a>
    </div>
  </form>
  <div class="mt-2 d-flex visually-hidden" id="palettePicker">
    {{- range $palettes -}}
    {{- $key := replace . " " "-" -}}
    {{- $title := replace . " " "_" | printf "color_%s" | T -}}
      <button type="button" id="palette-{{ $key }}" aria-label="{{ $title }}"
        class="btn btn-sm palette" data-palette="{{ $key }}">
      </button>
    {{- end -}}
  </div>
</section>
{{- end -}}
